<template>
    <div class="forpass">

    </div>
</template>

<script>
import Input from "@com/Input/index.vue"
import {useRouter} from "vue-router"
import { toRefs,reactive, ref,inject} from 'vue'
import {forget,sendcode} from "../../services/api"
import { Toast } from 'vant';
export default {
setup(){
    const router = useRouter()
    const otp = ref('OTP')
    const timer = ref()
    let loading = inject('loading', {})
    let fromdata = reactive({
        phone:'',
        password:'',
        repassword:'',
        code:'',
        vertiry_key:''
    })
    const back = () => router.back()

    const sencodes = () => {
            if(otp.value!='OTP') return
            if(fromdata.phone == "") return Toast("Phone no emty!")
            sendcode({
                phone:fromdata.phone,
                area:'91',
                type:'forget',
                captcha_key:'1',
                captcha_code:'1'
            }).then(res => {
                if(res.code==0){
                    fromdata.vertiry_key = res.data.key
                    Toast("Send Successful!")
                    clearInterval(timer.value)
                    timer.value = null
                    let second = 60
                    otp.value = second + "S"
                    timer.value = setInterval(() => {
                    --second
                    otp.value = second + "S"
                    if(second == 0){
                        clearInterval(timer.value)
                        timer.value = null
                        otp.value = 'OTP'
                        return
                    }
                    },1000)
                }else{
                    Toast(res.msg)
                }
            },err=>{
                Toast(err.msg)
            })

        }

        const rules = () => {
            if (fromdata.phone == "") {
                Toast("Account number Cannot be empty!");
                return false;
            }
            if (fromdata.password == "") {
                Toast("Password Cannot be empty!");
                return false;
            }
            if (fromdata.repassword == "") {
                Toast("Password again Cannot be empty!");
                return false;
            }
            if (fromdata.password != fromdata.repassword) {
                Toast("The two passwords are inconsistent!");
                return false;
            }
            if (fromdata.code == "") {
                Toast("Verification Code be empty!");
                return false;
            }
            return true;
        }

        const submit = () => {
            if(rules()){
                loading.value = true
                const data = Object.assign({},{
                        password:fromdata.password,
                        verification_key:fromdata.vertiry_key,
                        verification_code:fromdata.code    
                    }) 
                forget(data).then(res=>{
                    loading.value = false
                    if(res.code==0){
                        Toast('Password reset complete!')
                        router.push('/login')
                    }else{
                        Toast(res.msg)
                    }
                },err=>{
                    Toast(err.msg)
                    loading.value = false
                })             
            }
        }

    return{
        back,
        ...toRefs(fromdata),
        sencodes,
        otp,
        submit
    }
},
components:{
    Input
}
}
</script>

<style lang="scss" scoped>
.forpass{
    width: 100%;
    height: 100vh;
    padding:32px;
    box-sizing: border-box;
    overflow: hidden;
    background: rgb(255, 255, 255);
    font-size: 36px;
    font-weight: bold;

}
</style>